CSS Animacije

@keyframes

@keyframes se koristi za definiranje ključnih točaka animacije. S njim možemo odrediti kako će se element ponašati tijekom vremena, postavljajući stilove na početku, sredini i na kraju animacije (ili bilo kojoj drugoj fazi).

animation-name

Svojstvo animation-name povezuje animaciju s određenim @keyframes pravilom. To znači da pomoću ovog svojstva određujemo koja će animacija biti primijenjena na element.

animation-duration

Svojstvo animation-duration određuje koliko dugo traje cijeli ciklus animacije. Vrijednost se može navesti u sekundama (s) ili milisekundama (ms).

animation-delay

Svojstvo animation-delay određuje vremensko kašnjenje prije nego što animacija počne. Vrijednost se može izraziti u sekundama (s) ili milisekundama (ms).

animation-iteration-count

Svojstvo animation-iteration-count određuje koliko će puta animacija biti ponovljena. Može biti brojčana vrijednost ili infinite (neograničeno ponavljanje).

animation-direction

Ovo svojstvo kontrolira smjer u kojem će se animacija izvoditi:

• normal:od početka prema kraju.
• reverse: od kraja prema početku.
• alternate: od početka prema kraju, a zatim se vraća od kraja prema početku.
• alternate-reverse: počinje od kraja prema početku.

animation-timing-function

Svojstvo animation-timing-function definira brzinu promjena animacije tijekom vremena:

• linear: Animacija se odvija jednoliko.
• ease: Početak i kraj su spori, dok je srednji dio brži.
• ease-in: Animacija počinje sporo i ubrzava.
• ease-out: Animacija počinje brzo i usporava.
• ease-in-out: počinje i završava sporo,u sredini ubrzava.
• cubic-bezier(): Omogućuje definiranje vlastite brzine.

animation-fill-mode

animation-fill-mode određuje kako će se element ponašati nakon što animacija završi. Može imati ove vrijednosti:

• none: element se vraća u početno stanje.
• forwards: zadržava stilove primijenjene na posljednjoj točki animacije.
• backwards: koristi stilove s prve točke animacije dok čekamo da animacija počne.
• both: kombinira forwards i backwards.

animation

Svojstvo animation je skraćeni način za definiranje svih gore navedenih svojstava u jednom. Ovdje možemo navesti ime animacije, trajanje, odgodu, broj ponavljanja, smjer, funkciju vremenskog pomaka, itd.

Primjer Animacije

Ovdje se koristi animacija koji koristi

• @keyframes - Definira ključne točke - mijenja boje.
• animation-name - Povezuje animaciju s @keyframes pravilom.
• animation-duration - Određuje trajanje animacije (3 sekunde).
• animation-timing-function - Brzinu promjena animacije - ease-in-out.
• animation-iteration-count - Broj ponavljanja animacije - infinite.
• animation-direction - Smjer animacije - alternate.